<div ng-if="!hasExplorationId()">
  Warning: The file picker does not work outside the context of an exploration.
</div>
<div ng-if="hasExplorationId()">
  <div ng-show="!imageUploaderIsActive">

    <div ng-if="!filepathsLoaded">
      <center>
        <img src="/images/loading.gif" alt="Loading..." width="50px">
      </center>
    </div>

    <div ng-repeat="filepath in filepaths track by $index">
      <label>
        <input type="radio" ng-model="localValue.label"
               name="choiceGroup" id="<[filepath]>"
               value="<[filepath]>">
        <[filepath]>
      </label>
    </div>
    <img ng-src="<[getPreviewUrl(localValue.label)]>"/>

    <br><br>
    <button ng-click="openImageUploader()">Upload a new image</button>
  </div>

  <div ng-show="imageUploaderIsActive">
    <em>Upload an image</em>
    <br><br>
    <input type="file" id="newImage">
    <br>
    Choose a filename: <input type="text" ng-model="newImageFilename">
    <br>
    <button type="button" ng-click="uploadNewImage(newImageFilename)" ng-disabled="!newImageFilename">Save</button>
    <button type="button" ng-click="closeImageUploader()">Cancel</button>
  </div>
</div>
